<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h1>父组件</h1>
			
			<hr>
			<h2>子组件</h2>
			<custom @click-btn="parantHandle" title="ketang">
				<ul slot-scope="props">
					<li>{{message}}</li>
					<li>{{props.miaov}}</li>
					<li>{{props.leo}}</li>
				</ul>

			</custom>
			<custom title="miaov"></custom>
		</div>
		<script>
			// 父 -> 子 props
			// 子 -> 父 自定义事件
			// 定制结构 solt

			// Vue.extend()
			Vue.component('custom', {
				//props: ['title'], // 组件的实例上
				props:{
					title: {
						type: [String,Number],
						default: 'hello'
					}
				},
				data(){
					return {
						message: '子数据'
					}
				},
				template: `<div>
					<h2>{{title}}</h2>
					<button @click="clickBtn">点击</button>
					<div>
						<slot :miaov="message" leo="123">
							<p>hello</p>
							<p>hello</p>
						</slot>	
					</div>
				</div>`,
				methods: {
					clickBtn(){
						this.$emit('click-btn')
					}
				}
			});

			new Vue({
				el: '#app',
				data:{
					message: '父级的数据'
				},
				methods: {
					parantHandle () {
						console.log(123);
					}
				}
			})

		</script>
	</body>
</html>